<%-- 
    Document   : ThongKeVBDi
    Created on : Jun 10, 2011, 10:41:50 PM
    Author     : pdaitoan
--%>

<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.5.1.js"></script>
        <script type="text/javascript" src="../js/jquery.ui.core.js"></script>
        <script type="text/javascript" src="../js/jquery.ui.datepicker.js"></script>
        <script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
    <link  type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
    <style type="text/css">
            @import "../css/main.css";
            @import "../css/menu.css";
            @import "../menu/menu_style.css";
            @import "../css/VanBanDi.css";
            @import "../css/jquery.ui.datepicker.css";
            @import "../css/jquery.ui.theme.css";
            @import "../css/demo_page.css";
            @import "../css/demo_table.css";
            .ui-widget{font-size:0.7em;}
            .ui-helper-hidden-accessible{clip:auto;}
    </style>
    <script type="text/javascript" charset="utf-8">
		var oTable;
                var giRedraw = false;
                var asInitVals = new Array();
                var ID;
		$(document).ready(function() {
			/* Add a click handler to the rows - this could be used as a callback */
			$("#example tbody").click(function(event) {
				$(oTable.fnSettings().aoData).each(function (){
					$(this.nTr).removeClass('row_selected');
				});
				$(event.target.parentNode).addClass('row_selected');
			});
				/* Add a click handler for the delete row */
			$('#delete').click( function() {
				var anSelected = fnGetSelected( oTable );
                                       //alert(anSelected[1]);
				oTable.fnDeleteRow( anSelected[0] );
			} );
				/* Init the table */
			oTable = $('#example').dataTable( {


                            "aaSorting": [[ 0, "asc" ]],
                            "sPaginationType": "full_numbers",
                            "oLanguage": {
                            "sSearch": "Search all columns:"
                            }
                        } );
                                $("tfoot input").keyup( function () {
					/* Filter on the column (the index) of this element */
					oTable.fnFilter( this.value, $("tfoot input").index(this) + 1);
				} );



				/*
				 * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
				 * the footer
				 */
				$("tfoot input").each( function (i) {
					asInitVals[i] = this.value;
				} );

				$("tfoot input").focus( function () {
					if ( this.className == "search_init" )
					{
						this.className = "";
						this.value = "";
					}
				} );

				$("tfoot input").blur( function (i) {
					if ( this.value == "" )
					{
						this.className = "search_init";
						this.value = asInitVals[$("tfoot input").index(this)];
					}
				} );
		} );



		/* Get the rows which are currently selected */
		function fnGetSelected( oTableLocal )
		{
			var aReturn = new Array();
			var aTrs = oTableLocal.fnGetNodes();
				for ( var i=0 ; i<aTrs.length ; i++ )
			{
				if ( $(aTrs[i]).hasClass('row_selected') )
				{
					aReturn.push( aTrs[i] );
                                               ID = aTrs[i];
				}
			}

			return aReturn;
		}
                function setEdit()
                {
                      alert('Edit');
                      alert($(".row_selected .id").attr("align"));
                      var id = ID;
                      <% session.setAttribute("ID", ""); %>
                }
                function setDelete()
                {
                       alert('Delete')
                       <% session.setAttribute("ID", "Delete"); %>
                }

    </script>
    <script>
	$(function() {
		$( ".datepicker" ).datepicker();
	});
        
	</script>
        <title>JSP Page</title>
    </head>
    <body>
    <%@include file="../header.jsp" %>
    <div id="vbd">
    Thống kê văn bản đi
    </div> 
    <div id="vanbandi">
    </div>
    <form id="form1" method="post">
      <table width="738" height="112" border="0" align="center">
        <tr>
          <td width="121">Từ ngày</td>
          <td width="176">
            <input class="datepicker" name="txtFromDate" type="text"></td>
          <td width="85">Đến ngày</td>
          <td width="90"><input type="text" name="txtToDate" class="datepicker"></td>
          <td width="244"><label></label></td>
        </tr>
        
        <tr>
          <td><input type="submit" name="btnThongKe" id="button" value="Thực hiện"></td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>
                  <tr>
                      <th>ID</th>
                   <th>Username</th>
                   <th>Full Name</th>
                   <th>Role</th>
                   <th>VB đi</th>
                  </tr>
                 </thead>
                 <tbody>
                   <%
                        UserAccess user1 = new UserAccess();
                        List<Account> list;
                        list = user1.getListUser();
                        if (list.isEmpty() == false)
                            for(Account acc : list)
                            {
                  %>
                  <tr class="gradeA">
                    <td class="id" style="width: 75px" align="center"><% out.println(acc.getId()); %></td>
                    <td style="width: 120px" > <% out.println(acc.getUsername()); %></td>
                    <td style="width: 150px" > <% out.println(acc.getFullname()); %></td>
                    <td style="width: 120px" align="center" ><% out.println(acc.getRole()); %></td>
                    <td style="width: 100px"><a href="../VanBanDi/ListODoc.jsp?AccountID=<% out.print(acc.getId()); %>">Danh sách</a></td>
                  </tr>
                  <% } %>
                 </tbody>
                 <tfoot>
                        <tr>
                            <th></th>
                            <th><input type="text" name="search1" value="Username" class="search_init" /></th>
                            <th><input type="text" name="search2" value="Full name" class="search_init" /></th>
                            <th><input type="text" name="search3" value="Role" class="search_init" /></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                    </tfoot>
            </table>
      </form> 
	</body>
</html>
